<template>
  <div>
    <!-- 文本插值 -->
    <p>{{ message }}</p>

    <!-- 原始HTML渲染 -->
    <div v-html="rawHtml"></div>

    <!-- 动态绑定属性 -->
    <div :id="dynamicId">动态ID示例</div>

    <!-- 使用JavaScript表达式 -->
    <p>计数器乘以10: {{ counter * 10 }}</p>

    <!-- 使用方法 -->
    <button @click="incrementCounter">点击我增加计数</button>
    <p>计数: {{ counter }}</p>

    <!-- 条件渲染 -->
    <p v-if="ok">Ok是true，所以你可以看到我</p>
    <p v-else>Ok是false，所以你看不到我</p>

    <!-- 列表渲染 -->
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>

    <!-- 绑定类 -->
    <button :disabled="isButtonDisabled">我{{ isButtonDisabled ? '' : '不' }}被禁用</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      rawHtml: '<span style="color: red">这是红色的文字</span>',
      dynamicId: 'uniqueId',
      number: 10,
      ok: true,
      isButtonDisabled: false,
      counter: 0,
      list: ['苹果', '香蕉', '橘子']
    };
  },
  methods: {
    incrementCounter() {
      // 增加计数
      this.counter++;
    }
  }
};
</script>
